<html>
    <head>
        <title>基础例子：</title>
    </head>
    <body>
        <script>
             // 计算属性
                /*
                     模板中的表达式虽然非常的便利，但是他们的设计目的只是用于"简单计算"。
                    在模板中放入太多的逻辑会让模板过重，且难以维护。
                */
                 // 例如：
                    /*
                        <div id="example">
                            {{message.split(''),reverse().join('')}}
                        </div>
                        在这个地方，模板不在是简单的"声明式逻辑"。
                        你必须看一段时间才能意识到，这里是想要显示变量message的翻转字符串。
                        但是，当你想在模板的多处包含此翻转字符串时，就会更加难以处理。

                         所以，  对于任何复杂逻辑，你都应该使用 "计算属性"
                    */

                  //★一、 基础例子：
                        /*
                            <div id="example">
                                <p>Original message: "{{ message }}"</p>
                                <p>Computed reversed message: "{{ reversedMessage }}"</p>
                            </div>
                        */
                        var vm=new Vue({
                            el:'#example',
                            data:{
                                message:'Hello'
                            },
                            computed:{
                                // 计算属性的getter
                                reversedMessage:function(){
                                    return this.message.split('').reverse().join('');
                                }
                            }
                         });
                         /*
                            这里我们声明了一个计算属性 "reversedMessage" 
                            我们提供的函数将作为property vm.revertedMessage的getter函数；

                            你可以打开浏览器的控制台，自行修改例子中的 vm.reversedMessage 的vm。 会发现，vm.reversedMessage
                            的值始终取决于vm.message的值。

                            你可以像绑定普通property一样在模板中绑定计算属性。Vue知道 vm.reversedMessage 依赖于 vm.message,
                            因此当 vm.message发生改变时，所有依赖vm.reversedMessage的绑定也会更新。

                            而且最妙的是我们已经一声明的方式创建了这种依赖关系： 计算属性的getter函数是没有副作用的,这使它更易于测试和理解。
                         */
        </script>
    </body>
</html>